<html>
  <head>
    <title></title>
    <style>
    
      button[type=radio] { 
        style-set: std-radio-base; // suppress default decoration styling
        background-image:url(stock:circle); 
        background-size:16dip 16dip; 
        background-position: 0 50%; 
        background-repeat:no-repeat;
        foreground:none;
        stroke:#333;
        stroke-width:1dip;
        padding: 1dip 1dip 1dip 20dip;
      }
      button[type=radio]:checked { 
        // that fat dot inside:
        foreground-image:url(stock:disk); 
        foreground-size:8dip 8dip; 
        foreground-position: 4dip 50%; 
        foreground-repeat: no-repeat; 
      }
      
      button[type=radio]:hover {
        stroke:#0af;
      }

      button[type=checkbox] { 
        style-set: std-checkbox-base; // suppress default decoration styling
        background-image:url(stock:frame); 
        background-size:16dip 16dip; 
        background-position: 0 50%; 
        background-repeat:no-repeat;
        foreground:none;
        stroke:red;
        stroke-width:1dip;
        padding: 1dip 1dip 1dip 20dip;
      }
      button[type=checkbox]:checked { 
        // that fat dot inside:
        foreground-image:url(stock:checkmark); 
        foreground-size:9dip 9dip; 
        foreground-position: 4dip 50%; 
        foreground-repeat: no-repeat; 
      }
      
      button[type=checkbox]:hover {
        stroke:#0af;
      }

    
    </style>
    <script type="text/tiscript"></script>
  </head>
<body>

  <button|radio(group) checked>first</button>
  <button|radio(group)>second</button>
<hr>
  <button|checkbox(a) checked>first</button>
  <button|checkbox(b)>second</button>


</body>
</html>
